<template>
  <div class="container-official">
    <div class="official-label">
      <div @click="none" class="none-offcial">取消</div>
      <div @click="save" class="save-offcial">保存</div>
    </div>
    <div class="process">
      <Process ref="process" :conf="conf" class="operation-area" tabName="processDesign" official="official" />
    </div>
  </div>
</template>
<script>
import { saveProcess, queryProcJsonByFormId } from '@/api'
import OA, { Process, injectRequest, convert } from '@/components/oa/oa-process.umd'
import { post, get, put } from '@/api/request'
import '@/components/oa/oa-process.css'
const defaultData = {
  type: 'START',
  content: '所有人',
  name: '发起人',
  properties: {
    title: '发起人',
    initiator: [],
    formOperates: [],
    actionerRules: [{ type: '' }],
  },
  nodeId: 'sid_Gb2',
  childNode: {
    type: 'APPROVER',
    content: '发起人自选',
    name: '审批人',
    properties: {
      approvers: [],
      actionerRules: [
        {
          multi: false,
          type: 'target_select',
          approvers: [],
          select: ['allStaff'],
          range: {
            labels: [],
            approvals: [],
          },
        },
      ],
      title: '审批人',
      assigneeType: '2',
      formOperates: [],
      counterSign: 2,
      optionalMultiUser: '1',
      optionalRange: '1',
      approvers: [],
      roleId: '',
    },
    nodeId: 'sid_Nb2',
    prevId: 'sid_Gb2',
    childNode: {
      type: 'NOTIFIER',
      content: '直接主管',
      name: '抄送人',
      properties: {
        actionerRules: [
          {
            type: 'target_management',
            approvers: [],
            level: 1,
          },
        ],
        counterSign: 2,
        title: '抄送人',
        menbers: {},
        propertiesRole: '',
        userOptional: true,
        peoplewhoCopied: 'target_management',
      },
    },
    conditionExpressionValue: '',
  },
  conditionExpressionValue: '',
  // },
}
export default {
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  name: 'OfficialDemo',
  data() {
    window.a = this
    return {
      convert,
      conf: convert.processOut(defaultData),
    }
  },
  created() {
    //要使用必须先注入接口 这边先自己注入 到时候用这个组件的时候注入
    injectRequest({
      get,
      post,
      put,
    })
    this.getPro()
  },
  components: {
    Process,
  },
  methods: {
    save() {
      this.getData().then((res) => {
        let data = convert.processOut(res.formData)
        // data.processCode = 'p_db54ae5c5cc34796a8c8442a0157a4a6'
        // data.procType = 'doc'
        // data.jsonStr = JSON.stringify(data)

        let par = {
          processCode: this.id,
          processConfig: data,
        }
        console.log(data, par, 'data')
        return put('sys/sysEntityProc/deploy', par)
          .then((res) => {
            this.$message.success('成功')
            this.none()
          })
          .catch((err) => {
            this.$message.error('失败')
          })
      })
    },
    getPro() {
      return get('sys/sysEntityProc/getProcModel', {
        procCode: this.id,
      })
        .then((res) => {
          console.log(res, 'res111')
          if (res.processConfig) {
            // let obj = JSON.parse(res.result)
            this.conf = convert.processOut(res.processConfig)
          } else {
            this.conf = convert.processOut(defaultData)
          }
        })
        .catch((err) => {
          this.conf = convert.processOut(defaultData)
          this.$message.error('失败')
        })
    },
    //获取数据
    getData() {
      return this.$refs.process.getData()
    },
    // 关闭
    none() {
      this.$emit('approval')
    },
  },
}
</script>
<style >
.layout .header .user-wrapper,
.layout .top-nav-header-index .user-wrapper {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
}
.layout .header .user-wrapper .action.action-full,
.layout .top-nav-header-index .user-wrapper .action.action-full {
  height: 100%;
  display: flex;
  align-items: center;
}
.container-official {
  height: 100%;
}
.official-label {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 15px;
}
.none-offcial {
  width: 100px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  color: #2196f3;
  border-radius: 15px;
  top: 16px;
  float: right;
  border: 1px solid #2196f3;
  margin-right: 20px;
  cursor: pointer;
}
.save-offcial {
  width: 100px;
  height: 34px;
  background: #2196f3;
  text-align: center;
  line-height: 34px;
  color: #ffffff;
  border-radius: 15px;
  top: 16px;
  float: right;
  cursor: pointer;
}
.process{
  height: 75vh;
}
</style>



